﻿@model CmsAdminAnnotationModel

@functions
{
    string LegendCssClass(int userGroupId)
    {
        return string.Format("b-icon_{0}", userGroupId);
    }
    string CssDefinitions(CmsAdminAnnotationColorScheme model)
    {
        var sb = new System.Text.StringBuilder();

        sb.AppendFormat(".bg-{0} .b-sticker__head {{ background:{1};}}", model.UserGroupId, model.Color);
        sb.AppendLine();
        sb.AppendFormat(".bg-{0} .b-sticker__arrow {{ border-color:transparent {1} transparent;}}", model.UserGroupId, model.Color);
        sb.AppendLine();
        sb.AppendFormat(".b-icon_{0} {{ background:{1}}}", model.UserGroupId, model.Color);
        sb.AppendLine();
        sb.AppendFormat(".bg-{0} .b-sticker__comment__user {{ color:{1}}}", model.UserGroupId, model.Color);
        sb.AppendLine();
        
        return sb.ToString();
    }
}
<link href="/admin/assets/css/special/stickyNotes.less" type="text/css" rel="stylesheet" />
<style type="text/css">
    @foreach (var item in Model.ColorDefinitions)
    {    
    @CssDefinitions(item)    
    }
</style>

<script type="text/javascript" src="/admin/assets/js/special/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/admin/assets/js/special/knockout-1.2.1.min.js"></script>
<script type="text/javascript" src="/admin/assets/js/special/sticky-notes.js"></script>
           
<div class="b-add-sticker">
	<div class="b-add-sticker__head">
		<h3 class="b-add-sticker__title">Add your own annotations</h3>
		<a class="b-icon b-icon_slider b-icon_expand b-icon_expand_min" href="#"></a>
	</div>
	<div class="b-add-sticker__body g-clear">
		
		<ul class="b-legend">
			@foreach (var item in Model.ColorDefinitions)
   {
            <li class="b-legend__item"><i class="b-icon @LegendCssClass(item.UserGroupId)"></i>@item.UserGroupName notes</li>	
   }
		</ul>	
		<button id="cms-js-save-annotation" class="b-sticky-button b-sticky-button_small" type="submit">Save comments <br />& annotations</button>	
		<button id="cms-js-add-annotation" class="b-sticky-button b-sticky-button_small b-sticky-button_colour_grey" type="submit">Add one more</button>
        <input type="hidden" id="stickyNotes-entityid" value="@Model.EntityId" />
        <input type="hidden" id="stickyNotes-entitytypeparameter" value="@Model.EntityTypeParameter" />
	</div>	
</div>
    <div id="stickyNotesPanel">
        @if (Model.Notes.Any())
        {
            foreach (var item in Model.Notes)
            { 
        <div class="b-note" style="left:@string.Format("{0}px", item.X); top:@string.Format("{0}px", item.Y); z-index:@item.Z" id="@string.Format("annotation_{0}", item.Id)">
            <div class="b-sticker @string.Format("bg-{0}", item.UserGroupId)">
                <div class="b-sticker__head g-clear">
                   	<span class="b-sticker__arrow"></span>                	
                    <span class="b-sticker__user"><i class="b-icon"></i>@item.UserCreatedBy</span>
                    @if (item.UserCreatedBy == Model.CurrentUser.UserName)  
                    {
                    <input type="button" name="deleteAnnotation" class="b-sticker__delete" data-annotations-id="@item.Id" value="" title="Delete annotation" />
                    }
                    <input type="button" name="addAnnotationComment" class="b-sticker__add" data-annotations-id="@item.Id" value="" title="Add comment"  />
                </div>
                <div class="b-sticker__body g-clear">
                    @if (item.UserCreatedBy == Model.CurrentUser.UserName)
                    {
                        <input type="button" name="editAnnotation" class="b-sticker__edit float-left" value="" title="Edit annotation" />
                    }
                    <div class="b-sticker__annotation">
                        <span data-annotations-text="@item.Id">@item.AnnotationText</span>
                    </div>
                    <div id="@string.Format("annotation_comment_container_{0}", item.Id)">
                        @if (item.Comments.Any())
                        {
                            foreach (var comment in item.Comments)
                            {
                                <div class="b-sticker__comment" id="@string.Format("annotation_comment_{0}", comment.Id)">
                                    <span class="b-sticker__comment__user"><i class="b-icon"></i>@comment.UserCreatedBy</span>
                                    @if (comment.UserCreatedBy == Model.CurrentUser.UserName)
                                    {
                                        <input type="button" class="b-sticker__comment__delete" data-annotation-comment-id="@comment.Id" value="" name="deleteComment" title="Delete comment" />    
                                    }
                                    <div class="b-sticker__comment__text">
                                        @if (comment.UserCreatedBy == Model.CurrentUser.UserName)
                                        {
                                            <input type="button" class="b-sticker__comment__edit" value=""  name="editComment" title="Edit comment" />   
                                        }
                                        <span data-annotation-comment-text="@comment.Id">@comment.CommentText</span>
                                    </div>
                                </div>
                            }
                        }
                    </div> 
                </div>
            </div>
        </div>
            }
        }
    </div>
<div id="stickyNotesProto" style="display:none">
    <div class="b-sticker @string.Format("bg-{0}", @Model.CurrentUserGroupId)">
        <div class="b-sticker__head g-clear">
            <span class="b-sticker__arrow"></span>                	
            <span class="b-sticker__user"><i class="b-icon"></i>@Model.CurrentUser.UserName</span>
            <input type="button" name="deleteAnnotation" class="b-sticker__delete" value="" title="Delete annotation"/>
        </div>
        <div class="b-sticker__body g-clear">
            <input type="button" name="editAnnotation" class="b-sticker__edit float-left" value="" title="Edit annotation" />
            <div class="b-sticker__annotation">
                <span></span>
            </div>                    
        </div>
    </div>        
</div>
<div id="stickyNotesCommentProto" style="display:none" class="b-sticker__comment @string.Format("bg-{0}", 4)">
    <span class="b-sticker__comment__user"><i class="b-icon"></i>@Model.CurrentUser.UserName</span>
    <input type="button" class="b-sticker__comment__delete hide" value="" name="deleteComment" title="Delete comment" />
    <div class="b-sticker__comment__text">
        <input type="button"  class="b-sticker__comment__edit hide" value=""  name="editComment" title="Edit comment"/>
        <span class="hide"></span>
       <textarea class="annotation-comment-editable text"></textarea>
        <a class="b-sticky-button b-sticky-button_small cms-js-saveAnnotationComment" href="#">Save</a>
        <a class="b-sticky-button b-sticky-button_small b-sticky-button_colour_grey cms-js-cancelAnnotationComment" href="#">Cancel</a>
        <script type="text/javascript">
        $(document).ready(function(){
            var stickyLoad = $('.b-sticker__body');
            $('#stickyNotesCommentProto .annotation-comment-editable').css({
                'width': stickyLoad.find('.b-sticker__comment').width()-30 + 'px'
            })
            if(stickyLoad.parents('.b-note').find('.b-sticker__comment').length>=1)
                {
                    stickyLoad.parents('.b-note').find('.b-sticker__comment').parents('.b-sticker__body').addClass('b-sticker__body-with-comments');
                }
        })
        </script>
    </div>
</div>


